<template>
  <div style="border-radius: 10px">
    <img
      mode="aspectFill"
      :src="
        activityImage ||
        'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg'
      "
      style="
        border-radius: 10px 10px 0px 0px;
        width: 100%;
        height: 114px;
        object-fit: cover;
      "
    />
    <div
      style="
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 5px;
        background-color: white;
        border-radius: 0px 0px 10px 10px;
      "
    >
      <div style="padding: 8px">
        <div>
          <text style="font-size: 18px; font-weight: bold; color: grey">{{
            title
          }}</text>
        </div>
        <div style="height: 4px"></div>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
          "
        >
          <text style="font-size: 11px">{{ time }}</text>
          <div v-if="status === 1" class="label">进行中</div>
          <div v-if="status === 0" class="label ended">已结束</div>
          <div v-if="status === 2" class="label">立即预约</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'
// status: 0-进行中 1-已结束 2-立即预约
const props = defineProps( ['title', 'activityImage', 'time', 'id', 'status'],)

</script>

<style scoped>
.label {
  width: 58.67px;
  height: 20.89px;
  line-height: 15px;
  border-radius: 4px;
  background-color: rgba(116, 184, 247, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 10px;
  text-align: center;
  font-family: Microsoft Yahei;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ended {
  background-color: rgba(102, 102, 102, 1);
}
</style>
